<script setup name="QuestionInfo">
import {onMounted, ref, reactive, defineEmits} from 'vue'
import {saveApi, updateApi} from "@/api/practice/question";

const emit = defineEmits(['flush']);
const {proxy} = getCurrentInstance();
// 表单数据
const formData = ref({
  id: 0,
  contents: [],
  edate: '',
  info: '',
  sdate: '',
  title: ''
})
//自定义输入框的数量
const contentLength = ref(1);
const isupdate = ref(false)

// 表单验证
const formRules = reactive({
  title: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 2, max: 6, message: '请输入2~6个字符', trigger: 'blur'}
  ]
})
// 提交验证
const formRef = ref()
const imageUrl = ref("")
const handleAvatarSuccess=(res, file)=>{
  imageUrl.value = URL.createObjectURL(file.raw);
}
function onSubmit() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      if (isupdate.value) {
        updateApi(formData.value).then(response => {
          proxy.$modal.msgSuccess(isupdate.value ? "修改问卷成功" : "新增问卷成功")
          emit("flush")
          state.value = false
        })
      } else {
        saveApi(formData.value).then(response => {
          proxy.$modal.msgSuccess(isupdate.value ? "修改问卷成功" : "新增问卷成功")
          emit("flush")
          state.value = false
        })
      }
    }
  });
}


// 对话框状态
const state = ref(false)

// 暴露
defineExpose({
  state,
  formData,
  isupdate
})
</script>
<template>
    <el-dialog
        v-model="state"
        :title="`${isupdate ? '修改' : '添加'} 调查问卷`"
        width="600"
        :before-close="() => (state = false)"
    >
      <!-- 内容 -->
      <el-form
          v-if="state"
          size="large"
          label-width="80"
          :model="formData"
          :rules="formRules"
          ref="formRef"
      >
        <el-form-item label="问卷标题">
          <el-input placeholder="请输入问卷标题" v-model="formData.title"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始日期">
              <el-date-picker
                  v-model="formData.sdate"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="请选择开始日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期">
              <el-date-picker
                  v-model="formData.edate"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="请选择结束日期"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="问卷说明">
          <el-input type="textarea" placeholder="请输入问卷说明" v-model="formData.info" :rows="3"/>
        </el-form-item>


        <el-form-item label="问卷图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/api/question/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="dvimg" />
            <el-icon v-else class="avatar-uploader-icon">+</el-icon>
          </el-upload>
        </el-form-item>
        <!--  修改-->
        <el-row v-if="isupdate">
          <el-col :span="24" v-for="i in formData.contents.length">
            <el-form-item :label="`问题-${i}`">
              <el-input placeholder="请输入问卷问题" v-model="formData.contents[i-1]"/>
            </el-form-item>
          </el-col>
        </el-row>

        <!--      新增 动态添加-->
        <div v-else>
          <el-row>
            <el-col :span="24" v-for="i in contentLength">
              <el-form-item :label="`问题-${i}`">
                <el-input placeholder="请输入问题内容" v-model="formData.contents[i-1]"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="">
            <el-button type="default" @click="contentLength++">添加问题</el-button>
            <el-button type="default" @click="contentLength--">移除问题</el-button>
          </el-form-item>
        </div>
        <el-form-item label="">
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button type="default" @click="state = false">取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 内容 -->
    </el-dialog>

</template>
<style>
.dvimg{
  width: 100px;
  height: 100px;
}
</style>
